<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/Community.css"/>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/js/moment.js" type="application/javascript"></script>
    <script src="/js/Community.js" type="application/javascript"></script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
        L2Dwidget.init({
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 100,
                "height": 200,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 1,
                "opacityOnHover": 1
            }
        });
    </script>
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = new Array("佐田", "闪电五连鞭", "🐎老师，发生甚么事了", "给我发了几张截图"
                    , "耗子尾汁", "不要搞，窝里斗", "小聪明", "二百斤的嘤国大理石也折不动我的手指头",
                    "左刺拳", "左正蹬", "右鞭腿", "化劲", "接化发", "婷婷");
                var $i = $("<span/>").text(a[a_idx]);
                a_idx = parseInt(Math.random() * (13 - 0 + 1), 10);
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 9999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#5bc0de"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
    </script>
    <style>
        pre {
            white-space: pre-wrap; /*css-3*/
            white-space: -moz-pre-wrap; /*Mozilla,since1999*/
            white-space: -pre-wrap; /*Opera4-6*/
            white-space: -o-pre-wrap; /*Opera7*/
            word-wrap: break-word; /*InternetExplorer5.5+*/
        }

        .question-content {
            border: 0;
            background-color: white;
            padding-right: 300px;
            font-size: 17px;
        }

        .comment-content-first{
            border: 0;
            background-color: white;
            padding-right: 300px;
            font-size: 12px;
        }


    </style>
</head>
<body>
<!-- 导航栏布局设计 -->
<div th:insert="~{navigation :: nav}"></div>
<!-- 首页问题列表问题设计 -->
<div class="container-fluid main profile">
    <div class="row">
        <!--左侧显示问题具体内容以及回复-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <!--显示内容设计-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 class="question-title">
                    <span th:text="${question.title}"></span>
                </h3>
                <span class="text-desc">
                <!--显示作者-->
                发布人：<span th:text="${question.user.name}"></span> |
                    <!--显示时间-->
                发布时间：<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
            </span>
                <hr/>
                <!--显示问题描述-->
                <pre class="col-lg-12 col-md-12 col-sm-12 col-xs-12 question-content" th:text="${question.description}"></pre>
                <!--分割线-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--显示问题的标签-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="label label-info" th:each="tag : ${question.tag.split('-')}" style="margin-right: 7px">
                            <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                            <span class="label label-info" th:text="${tag}" style="font-size: 100%"></span>
                        </span>
                </div>
                <!--分割线-->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <!--问题的发布者浏览这个问题时，他可以对这个问题进行一些编辑-->
                <br>
                <a class="community-menu indent" th:href="@{'/publish/'+${question.id}}"
                   th:if="${session.user != null && session.user.id == question.creator} "
                   style="text-decoration:none">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                </a>
                <a class="community-menu indent" th:href="@{'/question/delete/'+${question.id}}"
                   th:if="${session.user != null &&( session.user.id == question.creator || session.user.id == 450)} "
                   style="text-decoration:none">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    <span>删除</span>
                    <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                </a>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="indent">
                    <!--显示浏览数和回复数-->
                    ✍<span th:text="${question.commentCount}"></span>个回复
                    👀<span th:text="${question.viewCount}"></span>次浏览
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-hr">
                <!--显示对问题的一级评论-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments-first" th:each="comment :${comments}">

                    <div class="media">
                        <!--显示回复人头像-->
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded HeadFrame" th:src="${comment.user.avatarUrl}"
                                     onerror="this.src='/img/test.png'"/>
                            </a>
                        </div>
                        <!--显示具体回复人的名字，回复的具体内容，回复的点赞、二级评论功能，回复的时间-->
                        <div class="media-body" th:id="${'comment-body-'+comment.id}">
                            <!--显示回复人的名字-->
                            <h4 class="media-heading">
                                <span th:text="${comment.user.name}"></span>
                            </h4>
                            <!--显示回复的内容-->

                            <pre class="comment-content-first" th:text="${comment.content}"></pre>
                            <!--每条评论下的功能，包括点赞、评论（二级评论）和显示时间（最右边）-->
                            <div class="button-group">
                                <!--点赞和二级评论功能按钮组-->
                                <div class="btn-group" role="group" aria-label="...">
                                    <!--点赞数 功能已砍-->
                                    <!--
                                    <button type="button" class="btn btn-info icon">
                                        <span class="glyphicon glyphicon-thumbs-up" th:text="0"></span>
                                    </button>
                                    -->
                                    <!--二级评论-->
                                    <button type="button" class="btn btn-info icon" th:data-id="${comment.id}"
                                            onclick="collapseComments(this)">
                                        &nbsp;<!--空格，为了好看-->
                                        <span class="glyphicon glyphicon-comment"></span>
                                        &nbsp;<!--空格，为了好看-->
                                    </button>
                                </div>
                                <!--显示评论时间-->
                                <span style="float: right"
                                      th:text="${#dates.format(comment.gmtCreatr,'yyyy-MM-dd HH:mm')}"></span>

                                <!--二级评论 二级评论只显示评论人的头像、姓名、评论内容和评论时间，没有显示-->
                                <!--点赞数和展开下一级评论的功能-->
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse comments-next"
                                     th:id="${'comment-'+comment.id}">
                                    <br>
                                    <!--二级评论回复框 以及 关闭二级评论按钮 设计-->

                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <!--关闭二级评论按钮-->
                                        <button type="button" class="btn btn-info comment-button"
                                                style="margin-bottom: 10px"
                                                th:data-id="${comment.id}"
                                                onclick="closecollapseComments(this)">
                                            <span class="glyphicon glyphicon-chevron-up "></span>
                                        </button>
                                        <!--二级评论输入框-->
                                        <input type="text" class="form-control" placeholder="说点什么吧"
                                               th:id="${'input-'+comment.id}">
                                        <!--提交二级评论按钮-->
                                        <button type="button" class=" btn btn-success comment-button"
                                                style="margin-top: 5px"
                                                onclick="comment(this)" th:data-id="${comment.id}">评论
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--                一级评论结束-->
                <!--回复输入框-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section"
                     style="margin-top: 7px;margin-bottom: 7px;">
                    <h4>我的回复：</h4>
                    <input type="hidden" id="question_id" th:value="${question.id}">
                    <textarea class="form-control comment-textarea" id="comment_content" rows="6"
                              placeholder="说点什么吧"></textarea>
                    <button type="button" class="btn btn-success comment-button " onclick="post()">评论</button>

                </div>

            </div>

        </div>
        <!--右侧显示发布人、相关信息-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 class="community-question">发起人</h3>
                <div class="media">
                    <div class="media-left">
                        <img class="media-object img-rounded HeadFrame" th:src="${question.user.avatarUrl}"
                             th:alt="图片获取失败" onerror="this.src='/img/test.png'">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <br>
                            <span th:text="${question.user.name}"></span>
                        </h4>
                    </div>
                </div>
            </div>
            <!--图片显示测试-->
            <!--显示相关问题-->
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 class="community-question">相关问题</h3>
                <ul style="padding-left: 18px;list-style: none;line-height: 35px;font-size: 16px;">
                    <li th:each="related : ${relatedQuestions}">
                        <a th:href="@{'/question/'+${related.id}}" th:text="${related.title}"></a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>
</body>
</html>